<template>
  <a-config-provider :locale="enUS">
    <main-layout>
      <router-view></router-view>
    </main-layout>
  </a-config-provider>
</template>

<script lang="ts">
import {defineComponent, ref, computed} from 'vue'
import mainLayout from "./layout/mainLayout.vue";
import {useStore} from "vuex";
import enUS from 'ant-design-vue/es/locale/en_US';

export default defineComponent({
  name: 'App',
  components: {
    mainLayout
  },
  setup() {
    const store = useStore();

    return {
      enUS
    }
  }
})
</script>

<style lang="less">
@import url('styles/basicStyle.less');

@font-face {
  font-family: "myFont";
  src: url("https://secure.img1-fg.wfcdn.com/st4/stores/common/fonts/sofia/sofia_reg_subset.woff2") format('woff');
}

html, body, #app {
  margin: 0;
  border: 0;
  padding: 0;
  //width: 100vw!important;
  max-width: 100vw !important;
  min-height: 100vh;
  font-size: @main-font-size;
  //overflow: hidden;
  //overflow: auto;
  //overflow-x: hidden;
}

.ant-tree-switcher {
  display: none !important;
}

* {
  font-family: "myFont", sofia, sofiaFallback, arial, "Arial", "Times New Roman", "Microsoft YaHei", "黑体", "宋体", sans-serif, Times, serif !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */

  ::-webkit-scrollbar-thumb {
    z-index: 6666;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
  }

  word-break: break-word !important;


  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #F5F5F5;
    z-index: 6666;
  }

  ::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
    z-index: 6666;
  }
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ant-btn-primary {
  background-color: #1677ff !important;
  border-color: #1677ff !important;
}

.swiper-container {
  .swiper-button-prev {
    background-color: white;
    border: 1px solid #1677ff;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    @media screen and (max-width: 768px) {
      height: 40px;
      width: 40px;
      border-radius: 20px;
    }
    opacity: 0;
    transform: scale(0.8);
    transition: all .32s cubic-bezier(.22, .61, .36, 1);
    cursor: pointer;
  }


  .swiper-button-next {
    background-color: white;
    border: 1px solid #1677ff;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    @media screen and (max-width: 768px) {
      height: 40px;
      width: 40px;
      border-radius: 20px;
    }
    opacity: 0;
    transform: scale(0.8);
    transition: all .32s cubic-bezier(.22, .61, .36, 1);
    cursor: pointer;
  }

  .swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 16px;
    color: #1677ff;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
  }

  .swiper-button-disabled {
    display: none;
  }
}

form {
  display: unset;
  margin-top: unset;
}

.swiper-container:hover {

  .swiper-button-prev {
    opacity: 1;
    transform: scale(1);
    display: flex !important;
  }

  .swiper-button-next {
    opacity: 1;
    transform: scale(1);
    display: flex !important;
  }
}

.ant-radio-checked .ant-radio-inner {
  border-color: #1677ff !important;
}

.ant-radio-inner::after {
  position: absolute;
  top: 3px !important;
  left: 3px !important;
  --swiper-theme-color: #1677ff;
  display: table;
  width: 8px;
  height: 8px;
  background-color: #1677ff !important;
  border-top: 0;
  border-left: 0;
  border-radius: 8px;
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  content: ' ';
}


input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], select, textarea, button {
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none !important;
}

textarea {
  -webkit-appearance: none !important;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 100px white inset;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}


.ant-descriptions-small {
  .ant-descriptions-item-content {
    //padding: 8px 8px !important;
  }
}

</style>
